<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <link rel="stylesheet" href="/css/detail.css">
    <title>Detail</title>
</head>
<body>
<!-- 头部导航 -->
<header class="header bc-head">
    <h1>查询详情分析</h1>
</header>

<!-- 主体内容 -->
<main class="container">
    <!-- 指纹信息 -->
    <section class="fingerprint-card">
        <h2>SQL指纹</h2>
        <code th:text="${queryClass.fingerprint}"></code>
    </section>

    <!-- 性能指标 -->
    <div class="metrics-grid">
        <div class="metric-item">
            <label>平均耗时</label>
            <div class="value" th:text="${#numbers.formatDecimal(queryClass.metrics['Query_time'].avg, 1, 2)}">1.74s</div>
        </div>
        <div class="metric-item">
            <label>最大锁时间</label>
            <div class="value" th:text="${queryClass.metrics['Lock_time'].max}">0.001s</div>
        </div>
    </div>

    <!-- 直方图容器 -->
    <div id="histogramChart" style="height: 300px;"></div>
</main>

<!-- ECharts脚本 -->
<script src="/js/echarts.min.js"></script>
<script th:inline="javascript">
    // 初始化直方图
    const histogramData = /*[[${queryClass.histograms.Query_time}]]*/ [];
    const chart = echarts.init(document.getElementById('histogramChart'));

    const option = {
        xAxis: { type: 'category' },
        yAxis: { type: 'value' },
        series: [{
            type: 'bar',
            data: histogramData
        }]
    };
    chart.setOption(option);
</script>
</body>
</html>